<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      id="mg"
      style="
        width: 750px;
        padding-bottom: 40px;
        margin: 0px auto;
        background: #ffffff;
        border-radius: 10px;
      "
    >
      <div class="top">
        <div style="display: flex; flex-direction: row">
          <h2>订单信息{{ support }}</h2>
          <span class="s1 el-icon-close" @click="onClose"></span>
        </div>
      </div>
      <div class="mains">
        <info :myData="myData"></info>
        <total :myData="myData" :resourceTotal="resourceTotal"></total>
        <div
          class="d1"
          style="margin-top: 28px; margin-left: 470px"
          v-if="myIndex == 1"
        >
          <button class="btn3" @click="cancel(myData.orderNo)">取消订单</button>
          <span
            style="
              color: #9b9b9b;
              font-size: 16px;
              margin-left: 15px;
              margin-top: 30px;
              font-weight: bolder;
              letter-spacing: 2px;
            "
            >订单待支付</span
          >
        </div>
        <div class="d1" style="margin-top: 35px; margin-left: 120px">
          <span
            style="
              color: #9b9b9b;
              font-size: 14px;
              margin-left: 465px;
              margin-top: 30px;
              font-weight: bolder;
              letter-spacing: 2px;
              font-size: 16px;
            "
            v-if="myIndex == 2"
            >订单已被取消</span
          >
        </div>
        <div class="d1" style="margin-top: 35px; margin-left: 120px">
          <span
            style="
              color: #9b9b9b;
              font-size: 16px;
              margin-left: 475px;
              margin-top: 30px;
              font-weight: bolder;
              letter-spacing: 2px;
            "
            v-if="myIndex == 0"
            >订单已完成</span
          >
        </div>
      </div>
      <div style="margin-left: 25px; margin-top: 8px" v-if="myIndex == 1">
        <span style="font-size: 15px; color: #515151"
          >说明：当图书三审通过后自动扣费</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import Info from "./Info";
import Total from "./Total";
import mxr from "../../common/encryption";
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";

let userId;

export default {
  name: "OrderDetail",
  components: { Info, Total },
  props: [
    "myData",
    "resourceTotal",
    "support",
    "showCommonText",
    "showThirdText",
    "showCustomText",
  ],
  data() {
    return {
      selfShow: false,
      myIndex: 0,
    };
  },
  created() {
    userId = this.$route.query.userId;
  },
  mounted() {
    /**
     * 打开订单弹窗
     */
    let that = this;
    bus.$on("showClause2", function (id) {
      that.myIndex = id;
      that.selfShow = true;
    });
  },
  methods: {
    /**
     * 关闭弹窗方法
     */
    onClose() {
      this.selfShow = false;
    },

    /**
     * 取消订单
     */
    cancel(id) {
      let that = this;
      let json = {
        userId: userId,
        status: this.myIndex,
      };
      console.log(this.myIndex);
      console.log(id);
      console.log(userId);

      ajax.post({
        url: api.orders.routeName + api.orders.children.cancel + id,
        data: json,
        success: function () {
          that.$message.success('取消订单成功')
          that.myIndex = 2;

          that.$emit("listenEvent");
        },
      });

      //监听父组件方法
      // this.$emit("listenEvent")
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 30px;
  margin-left: 310px;
  color: white;
  letter-spacing: 3px;
}

.s1 {
  font-size: 26px;
  margin-left: 250px;
  color: white;
  margin-top: 5px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

.btn3 {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 3px;
  background: white;
  font-size: 14px;
  color: #f5a623;
}

.btn4 {
  width: 179px;
  height: 40px;
  background: #4a90e2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 14px;
}

.btn3:hover {
  cursor: pointer;
}

.btn4:hover {
  cursor: pointer;
}

.top {
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}

::-webkit-scrollbar {
  width: 2px;
}
</style>
